<script>
  import dayjs from 'dayjs';
  import sheep from '@/sheep';

  export default {
    props: {
      floralList: {
        type: Array,
        default() {
          return [];
        },
      },
      recordsList:{
        type: Array,
        default() {
          return [];
        }
      }
    },
    computed: {
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    methods: {
      dayjs,
      goPresentDetails() {
        this.$emit('goPresentDetails');
      },
      setImageStyle(w, h) {
        return {
          width: w + 'rpx',
          height: h + 'rpx',
          borderRadius: '50%',
        };
      },
      scrolltolower() {
        this.$emit('scrolltolower');
      },
    },
  };
</script>

<template>
  <view class="wh_750 flex flex-column align-center">
    <view class="hW_20"></view>
    <view class="floralList">
      <view class="floralList_head flex align-center justify-between">
        <view class="floralList_head_title">献花榜单</view>
        <view class="floralList_more flex  align-center" @click.stop="goPresentDetails">
          更多
          <text class="iconfont icon-ic_rightarrow fs_30"></text>
        </view>
      </view>
      <view class="hW_10"></view>
      <view class="floralList_content flex align-center justify-around">
        <view v-for="(item,index) in floralList"
              :key="index"
              class="floralList_content_item flex flex-column align-center"
        >
          <image :style="setImageStyle(84,84)" :src="`${nc_image}${item.user.avatar}`" v-if="!!item.user"></image>
          <view class="username" v-if="!!item.user">{{ item.user.nickname }}</view>
          <view class="ranking">
            第{{ index == 0 ? '一' : index == 1 ? '二' : index == 2 ? '三' : '四' }}名
          </view>
          <view class="num" v-if="!!item.total_num">{{ item.total_num }}</view>
        </view>
      </view>
    </view>
    <view class="hW_40"></view>
    <view class="floralRecord">
      <view class="head flex align-center justify-between">
        <view class="title">
          献花榜单
        </view>
        <view class="time">
          {{ dayjs(new Date().getTime()).format('YYYY年MM月DD日 HH:mm:ss') }}
        </view>
      </view>
      <view class="hW_20"></view>
      <view class="line"></view>
      <view class="hW_20"></view>
      <scroll-view :scroll-y="true" :scroll-x="false" style="width: 662rpx;max-height: 800rpx;"
                   @scrolltolower="scrolltolower">
        <view class="flex flex-column align-center" style="width: 662rpx;">
          <view class="list flex align-center justify-between mb-15" v-for="(item,index) in recordsList"
                :key="index">
            <view class="username">{{ item.title }}</view>
            <view class="time">{{ dayjs(item.add_time * 1000).format('MM月DD日 HH:mm:ss') || '' }}</view>
            <view class="tips">献花+1</view>
          </view>
        </view>
      </scroll-view>
      <view class="hW_20"></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .floralList {
    width: 662rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 20rpx;

    .floralList_head {
      .floralList_head_title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
      }

      .floralList_more {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #696969;
      }
    }

    .floralList_content {
      .floralList_content_item {
        .username {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #696969;
        }

        .ranking {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #4B4B4B;
        }

        .num {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #696969;
        }
      }
    }
  }

  .floralRecord {
    width: 662rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 20rpx;

    .head {
      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
      }

      .time {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }
    }

    .line {
      height: 2rpx;
      background: #E5E5E5;
    }

    .list {
      width: 662rpx;

      .username {
        width: 240rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #292929;
      }

      .time {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #292929;
      }

      .tips {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #292929;
      }
    }
  }
</style>